<!-- 3：附件的  作业4：商品分类页面 
圆角边框属性是 border-radius -->
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>作业4：商品分类页面</title>
		<style>
			#main {
				border: 2px outset darkorange;
				border-radius: 5%;
				width: 200px;
				/*设定超过隐藏*/
				overflow: hidden;
			}

			#main div {
				border: 1px dashed darkgray;
				float: top;
				height: 40px;
				width: 200px;
				/* background-color: blue; */
				margin: 1px;
				/* color:white; */
				text-align: left;
				padding-left: 0em;
				line-height: 40px;
			}

			a.tupian {
				color: black;
				position: absolute;
				image: 50%;
				text-decoration: none;
				/* top: 0.7em; */
			}
			a:hover{
				color: greenyellow;
			}
		</style>
	</head>
	<body>
		<div id="main">
			<div><img src="picture/icon_01.jpg" height="100%" /><a href="" class="tupian">酒水、饮料</a></div>
			<div><img src="picture/icon_02.jpg" height="100%" /><a href="" class="tupian">进口食品</a></div>
			<div><img src="picture/icon_03.jpg" height="100%"/><a href="" class="tupian">休闲零食</a></div>
			<div><img src="picture/icon_04.jpg" height="100%"/><a href="" class="tupian">地方特产</a></div>
			<div><img src="picture/icon_05.jpg" height="100%"/><a href="" class="tupian">保健、冲调</a></div>
			<div><img src="picture/icon_06.jpg" height="100%"/><a href="" class="tupian">粮油、生鲜</a></div>
			<div><img src="picture/icon_07.jpg" height="100%"/><a href="" class="tupian">美容洗护</a></div>
			<div><img src="picture/icon_08.jpg" height="100%"/><a href="" class="tupian">清洁洗涤</a></div>
			<div><img src="picture/icon_09.jpg" height="100%"/><a href="" class="tupian">母婴、纸品</a></div>
			<div><img src="picture/icon_10.jpg" height="100%"/><a href="" class="tupian">家居百货</a></div>
		</div>
	</body>
</html>
